<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图页面</title>
</head>
<body>
<input type="text" placeholder="Prompt">
<input type="text">
<div id="avatar"></div>
<div id="history-box">

</div>
<div  style="display: inline-block; width: 80vw">
    <div id="progress"></div>
</div>

</body>
</html>
<script>
    fetch('/user/history').then(res => {
        return res.json()
    }).then(res => {
        console.log(res)
        let history_div = document.querySelector('#history-box')
        for (let img_info of res) {
            let temp_img = document.createElement('img')
            temp_img.src = img_info["image"]["url"]
            history_div.appendChild(temp_img)
        }
    })
    fetch('/user/profile/avatar',{credentials:"include"}).then(res=>{
        return res.blob()
    }).then(blob=>{
        let img = document.createElement('img')
        img.setAttribute('src',URL.createObjectURL(blob))
        document.querySelector('#avatar').appendChild(img)
    })
    setInterval(()=>{
        fetch('/drawing/progress',{
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            method: 'POST',
            body: JSON.stringify({"task_ID":114514})
        }).then(res=>{
            return res.json()
        }).then(json=>{
            let bar = document.querySelector("#progress")
            bar.innerText = json['progress']
            bar.style='width:'+json['progress']+'%'
            // console.log(json['progress']+'%')
        })
    },25000)

</script>
<style>
    img {
        width: 10%;
    }
</style>